import G6 from "@antv/g6";

export const registerIcon = () => {
  G6.registerNode("iconfont", {
    draw(cfg: any, group) {
      const { style, labelCfg } = cfg;
      group.addShape("circle", {
        attrs: {
          x: 0,
          y: 0,
          r: cfg.size / 2,
          ...style,
          ...labelCfg,
        },
        // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
        name: "circle-shape",
      });

      const keyShape = group.addShape("text", {
        attrs: {
          x: 0,
          y: 0,
          fontFamily: "iconfont", // 对应css里面的font-family: "iconfont";
          textAlign: "center",
          textBaseline: "middle",
          text: cfg.text,
          fontSize: 16,
          fill: "#fff",
        },
        // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
        name: "text-shape1",
      });

      const labelY = cfg.size * 1.5;

      group.addShape("text", {
        attrs: {
          x: 0,
          y: labelY,
          textAlign: "center",
          text: cfg.label,
          ...labelCfg.style,
        },
        // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
        name: "text-shape1",
      });

      return keyShape;
    },
    // 响应状态变化
    setState(name, value, item) {
      const group = item.getContainer();
      const shape = group.get("children")[0]; // 顺序根据 draw 时确定
      if (name === "hover") {
        if (value) {
          shape.attr({
            ...shape.attrs.hover,
            cursor: "pointer",
          });
        } else if (value === false && !shape.attrs.isHighLight) {
          shape.attr({
            stroke: "",
            cursor: "",
          });
        }
      }
      if (name === "dark") {
        if (value) {
          shape.attr({
            opacity: 0.2,
          });
        } else {
          shape.attr({
            opacity: 1,
          });
        }
      }
      if (name === "highlight" || name === "selected") {
        if (value) {
          shape.attr({
            ...shape.attrs.highlight,
            isHighLight: true,
          });
        } else {
          shape.attr({
            stroke: "",
            isHighLight: false,
          });
        }
      }
    },
  });
};
